import { Text, View, Button, Input, Image, Label} from '@tarojs/components';
import React, { useState } from 'react';
import search_icon from '@/assets/search_icon.svg';
import exchange_icon from '@/assets/exchange_icon.svg';
import './index.scss';
//import Select from 'react-select'

const SearchBar = ({onClick1, onClick2, defaultText, defaultOption}) => {
    const sR = "搜索餐厅";
    const sD = "搜索菜品";
    const [searchValue, setSearchValue] = useState(defaultText);
    const [selectedOption, setSelectedOption] = useState(defaultOption);
    const [UrlPrefix, setUrlPrefix] = useState('');
    const handleSearch = () => {
        // 处理搜索逻辑，这里简单地将搜索值和选择的选项输出到控制台
        console.log('Search Value:', searchValue);
        console.log('Selected Option:', selectedOption);
        
        // 根据选择的选项跳转到不同的页面
        if (selectedOption === 0) {
            onClick1(searchValue);
        } else if (selectedOption === 1) {
            onClick2(searchValue);
        }
    };

  const handleInputChange = (e) => {
    setSearchValue(e.target.value);
  };

  const handleSelectChange = (e) => {
    setSelectedOption((selectedOption + 1) % 2);
  };

  return (
    <View className='panel1'>
        <Image className="IButton" src={search_icon} mode="aspectFill" onClick={handleSearch}/>
        <Input
            className="searchInput"
            type="text"
            placeholder={selectedOption ? sD : sR}
            value={searchValue}
            onInput={handleInputChange}
        />
        <View className='panel2' onClick={handleSelectChange}>
            <Image id='switch' className="IButton" src={exchange_icon} mode="aspectFill"/>
            <Label for='switch'>切换</Label>
        </View>
        
        {/* <Select options={[{value:"s1", label:"搜索餐厅"}, {value:"s2", label:"搜索菜品"}]} value={selectedOption} onChange={handleSelectChange}/> */}
    </View>
  );
};

export default SearchBar;